<template>
  <div>
    <ul class="nav-ul">
      <li class="nav-li" v-for="(item, index) in classData.nav" :key="index">
        <el-popover placement="right" trigger="click" vertical>
          <div slot="reference">
            <div class="top" @click="jumpLink(item)">
              <p style="float: left;margin-right: 5px;">
                <img class="icon" v-lazy="item.icon" alt="" />
              </p>
              <span class="title-name">{{ item.name }}</span>
            </div>
            <div class="desc">
              <el-tag type="border" color="green" v-show="item.title">{{item.title }}</el-tag>
                <div class="desc-txt">{{ item.desc }}</div>
            </div>
          </div>
          <div class="mu">
            <ul>
              <li icon="ios-send" @click="jumpLink(item)">跳转</li>
              <li icon="md-document" v-if="item.doc" @click="openDoc(item)">使用文档</li>
              <!-- <li icon="md-heart" @click="addFavorite(item)">添加到我的收藏</li> -->
              <li icon="ios-clipboard" class="btn" @click="copyLink">拷贝网址</li>
              <!-- <li icon="ios-add-circle" @click="addBookmarks(item.link, item.name)">加入书签</li> -->
              <!-- <li icon="ios-trash" v-show="del" @click="delUrl(item)">从本项中删除</li> -->
              <li v-if="ifEdits" @click="deleteItem(item)">删除</li>
              <li v-if="ifEdits" @click="edit(item)">编辑</li>
            </ul>
          </div>
        </el-popover>
      </li>
      <li v-if="ifEdits">
        <el-button @click="addItem()" class="nav-li add-item"> + </el-button>
      </li>
    </ul>
    <el-dialog
      title="文档"
      :visible.sync="modalDoc"
      fullscreen
      custom-class="dialog-style"
      :before-close="handleClose">
      <div class="usage-content" v-if="modalDoc">
          <div class="toc">
            目录
          <div id="toc" />
          </div>
          <div class="markdown">
            <vue-markdown :source="docData" :toc=true toc-id="toc" ></vue-markdown>
          </div>
      </div>
    </el-dialog>
    <edit-dialog :formData="itemData" :classData="classData" @dialog-form="dialogForm"></edit-dialog>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import Clipboard from 'clipboard'
import VueMarkdown from "vue-markdown";
import EditDialog from "@/components/editDialog"
import { randomNum } from "@/utils/index"
import hljs from 'highlight.js';
// import "highlight.js/styles/atom-one-dark.css";
import 'highlight.js/styles/github.css';


let highlightCode = () => {
  let preEl = document.querySelectorAll("pre");
  let codeEl = document.querySelectorAll("code");
  preEl.forEach(el => {
    hljs.highlightBlock(el);
  });
  codeEl.forEach(el => {
    hljs.highlightBlock(el);
  });
};

export default {
  data () {
    return {
      modalDoc: false,
      docSpinShow: false,
      docData: "",
      itemData: {
        id: '',
        name: '',
        icon: '',
        desc: '',
        doc: '',
        link: '',
        dlogOpen: null,
      },
      ifEdits: false,
    }
  },
  props: {
    classData: {
      default: {},
    },
    subTitle: {
      default: '',
    },
    del: {
      default: false,
    },
    editStatus: {
      default: false,
    },
    spinShow: {
      default: false,
    },
  },
  watch: {
    editStatus() {
      this.ifEdits = this.editStatus
    }
  },
  methods: {
    openDoc(item) {
      if(item.doc.startsWith("http")) {
        window.open(item.doc)
        return
      }
      this.modalDoc = true
      this.docSpinShow = true
      this.$axios
        .get(item.doc)
        .then(rep => {
          this.docData = rep.data;
        })
        .catch(e => {
          this.$message.error("获取数据失败!");
          window.console.log(e);
        })
        .then(() => {
          this.docSpinShow = false
        })
    },
    handleClose() {
      this.docData = ""
      this.modalDoc = false
    },
    jumpLink(item) {
      item.title = this.subTitle ? this.subTitle : item.title
      this.saveUsedList(item)
      window.open(item.link)
    },
    copyLink() {
      var clipboard = new Clipboard('.btn')
      clipboard.on('success', (e) => {
        // 成功提示
        this.$Message.success('复制成功')
        // 释放内存
        clipboard.destroy()
        window.console.log(e)
      })
      clipboard.on('error', (e) => {
        // 不支持复制
        this.$message.error('该浏览器不支持自动复制')
        // 释放内存
        clipboard.destroy()
        window.console.log(e)
      })
    },
    addFavorite(item) {
      const index = this.favoriteList.findIndex((a) => {
        return item.link === a.link
      })
      if (index >= 0) {
        this.$Message.info('你已经添加啦！')
        return
      }
      item.title = this.subTitle ? this.subTitle : item.title
      this.saveFavoriteList(item)
      this.$Message.success('添加成功')
    },
    delUrl(item) {
      this.deleteList(item)
    },
    edit(item) {
      this.itemData = item
      this.itemData.control = "edit"
      this.itemData.dlogOpen = true
            console.log("object", this.itemData);
    },
    addItem() {
      const temId = randomNum()
      this.itemData.id = temId
      this.itemData.control = "add"
      this.itemData.dlogOpen = true

            console.log("object", this.itemData);
    },
    deleteItem(item) {
      this.$confirm('此操作将删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            let navArry =this.classData.nav
            const index = navArry.findIndex((i) => i.id === item.id)
            navArry.splice(index, 1);
            const newData = {
              id:this.classData.id,
              name: this.classData.name,
              title: this.classData.title,
              nav: navArry
            }
            this.apiFn(newData)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    apiFn (data) {
      const temApi = "/api/" + this.classData.name
      this.$axios.post(temApi, data) // 获取nav数据
        .then(res => {
          console.log("res", res);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
        .catch(e => {
            this.$message.error({
                content: "删除数据失败!",
                duration: 120,
                closable: true
            });
            window.console.log("错误信息：",e);
        });
    },
    dialogForm(val) {
        this.itemData = {
          dlogOpen:val
        }
    },
    addBookmarks(url, title) {
      var ua = navigator.userAgent.toLowerCase()

      if (ua.indexOf('msie 8') > -1) {
        // IE8
        window.external.AddToFavoritesBar(url, title)
      } else if (document.all || window.external) {
        try {
          window.external.addFavorite(url, title)
        } catch (e) {
          this.$message.error('您的浏览器不支持,请手动收藏!')
        }
      } else if (window.sidebar) {
        window.sidebar.addPanel(title, url, '')
      } else {
        this.$message.error('您的浏览器不支持,请手动收藏!')
      }
    },
    ...mapActions(['saveFavoriteList', 'saveUsedList', 'deleteList']),
  },
  computed: {
    ...mapGetters(['favoriteList', 'ifEdit']),    
  },
  components: {
    VueMarkdown,
    EditDialog,
  },
  mounted() {
    highlightCode();
    if(this.ifEdit || this.editStatus){
      this.ifEdits = true
    }
  },
  updated() {
    highlightCode();
  }
}
</script>

<style lang="less" scoped>
@min-width: 768px;
span {
  word-break: break-all;
  word-wrap: break-word;
}

.top {
  height: 36px;
  p{
    margin:0;
    padding:0;
    border:0;
    vertical-align:baseline
  }
}
.nav-ul {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
}
.nav-li {
  position: relative;
  margin: 0 15px 15px 0;
  width: 182px;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
  background-color: #fafafa;
  overflow: hidden;
  transform-origin: right bottom;
  -webkit-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  transition: 0.1s linear;
  -webkit-transition: 0.1s linear;
  -ms-transition: 0.1s linear;
  @media screen {
    @media (max-width: @min-width) {
      width: 100%;
    }
  }
}
.desc {
  padding-top: 10px;
  border-top: 1px solid #eee;
  margin-top: 8px;
  line-height: 1.5;
  font-size: 12px;
  color: #A1A7B7;
}
.desc-txt{
  overflow:hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.used {
  display: block;
  font-size: 6px;
  width: 120px;
  color: gray;
}
.mu{
  ul li{
    height: 31px;
    line-height: 31px;
    border-bottom: 1px solid #f3f3f3;
    padding-left: 20px;
    color: #6b7386;
    &:hover{
      color: #000;
      // background-color: #eee;
      cursor: pointer;
    }
  }
}
.add-item{
  height: 118px;
  line-height: 60px;
  text-align: center;
  font-size: 55px;
  font-weight: 700;
  color: #868686;
  cursor: pointer;
}

.usage-content {
  font-size: 14px;
  width: 100%;
  line-height: 2;
  // padding: 40px 80px 20px 80px;
  @media screen {
    @media (max-width: @min-width) {
      padding: 0 10px 10px 10px;
    }
  }
  .toc{
    font-size: 16px;
    font-weight: 700;
    line-height: 2.7;
  }
  #toc{
      border-top: 1px solid #EBEEF5;
      font-size: 14px;
  }
}

.usage-content /deep/ ul {
  padding-left: 25px;
}

.usage-content /deep/ ol {
  padding-left: 25px;
}
.usage-content /deep/ h2 {
  padding-top: 90px;
  margin-top: -90px;
  box-shadow: 0 1px 1px rgba(0,0,0,.1)
}

.usage-content /deep/ blockquote {
  margin-top: 5px;
  padding: 0 1em;
  color: #6a737d;
  border-left: .25em solid #dfe2e5;
}

.toc {
  width: 200px;
  position: fixed;
  @media screen {
    @media (max-width: @min-width) {
      position: relative;
      margin-left: 0;
    }
  }
}
.toc /deep/ a {
  word-break: break-all;
  word-wrap: break-word;
}
.markdown {
  margin-left: 230px;
  @media screen {
    @media (max-width: @min-width) {
      position: relative;
      margin-left: 0;
    }
  }
}

</style>
<style lang="less">
.dialog-style {
  .el-dialog__header{
    position: fixed;
    width: 100%;
    font-weight: 700;
    line-height: 1px;
    border-bottom: 1px solid #e8eaec;
    background-color: #fff;
    padding: 14px 0;
    z-index: 9;
  }
  .el-dialog__title{
    padding-left: 32px;
  }
  .el-dialog__headerbtn{
    padding-right: 23px;
  }
  .el-dialog__body{
    padding: 90px 100px 80px;
  }
}  
</style> 